import React, { useEffect, useState } from 'react';
import Index from '../../../api/Inedx';
import { Space, Table, Tag, Switch, Select, Form, Input, Button, Row, Col, Popconfirm, Avatar } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import "./Resident.scss"
import { useDispatch } from 'react-redux';
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons';
import ExportJsonExcel from "js-export-excel"

// interface DataType {
//     key: number;
//     name: string;
//     id: number;
//     number: number;
//     phone: number;
//     signingStatus: number;
//     userStatus: boolean;
//     userTag: number;
//     IDnumber: number;
// }
interface DataType {
    key: number;
    residentName: string;
    residentId: number;
    residentPhone: number;
    signingStatus: number;
    residentStatus: boolean;
    rtId: number;
    residentNumber: number;
}

interface Props { }
function Resident(props: Props) {
    let dispatch = useDispatch()
    let navigate = useNavigate()
    let [myresidentlist, setMyResdentlist] = useState([])
    let [show, setShow] = useState(false)
    let [userTag, setUsertag]: any = useState([])
    let [csage, setCsage]: any = useState([])
    let [mechanism, setMechanism]: any = useState([])
    let [team, setTeam]: any = useState([])
    let getResident = async () => {//获取居民列表
        let res = await Index.Resident.ResidentList()
        res.data.data.map((item: any, index: any) => {
            return (
                item.key = item.residentId
            )
        })
        setMyResdentlist(res.data.data)
        console.log(res.data.data);
    }
    let getUsertag = async () => {//获取居民标签列表
        let res = await Index.Resident.GetUserTag()
        console.log(res);
        let arr = res.data.data.map((item: any) => {
            return { value: item.rtId, label: item.rtName }
        })
        // console.log(arr);

        setUsertag(arr)
    }

    let getSelectCstageList = async () => {//获取签约状态
        let res = await Index.Resident.SelectCstageList()
        console.log(res);
        let arr = res.data.data.map((item: any) => {
            return { value: item.csageId, label: item.cstageName }
        })
        setCsage(arr)
    }
    let getSelectMechanismsList = async () => {//获取签约机构
        let res = await Index.Resident.SelectMechanismsList()
        console.log(res);
        let arr = res.data.data.map((item: any) => {
            return { value: item.mechanismId, label: item.mechanismName }
        })
        setMechanism(arr)
    }
    let getSelectTeamList = async () => {//获取医生团队
        let res = await Index.Resident.SelectTeamList()
        console.log(res);
        let arr = res.data.data.map((item: any) => {
            return { value: item.teamId, label: item.teamName }
        })
        setTeam(arr)
    }
    useEffect(() => {
        getResident()
        getUsertag()
        getSelectCstageList()
        getSelectMechanismsList()
        getSelectTeamList()
    }, [])
    let deleteResident = async (id: any) => {//删除单条数据
        let res = await Index.Resident.DeleteResident({ residentId: id })
        console.log(res);
        getResident()
    }
    let goDetail = (id: any) => {//去详情页,存储用户ID
        navigate({ pathname: "/index/residentdetail/" })
        dispatch({ type: "SAVE_RESIDENTID", payload: id })
    }
    let SetUserStatus = async (id: any) => {//设置用户状态
        let res = await Index.Resident.SetUserStatus({ residentId: id })
        console.log(res);
        getResident()
    }
    let excel = () => {//导出Excel表
        let sheetFilter = ["residentId", "residentName", 'residentNumber', 'residentPhone', 'signingStatus']//需要导出的属性，一般列表数据的属性
        let option = { fileName: "", datas: [{}] };
        option.fileName = "居民列表";
        option.datas = [
            {
                sheetData: myresidentlist,//需要导出的数据
                sheetName: "居民列表",
                sheetFilter: sheetFilter,
                sheetHeader: ["编号", "姓名", "身份账号", "手机号", "签约状态"],//每一列的列头
                columnWidth: [20, 20, 20, 20],//每一列的宽
            }
        ]
        let toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel();

    }
    const columns: ColumnsType<DataType> = [
        {
            align: "center",
            title: '编号',
            dataIndex: 'residentId',
            key: 'residentId'
        },
        {
            align: "center",
            title: '姓名',
            dataIndex: 'residentName',
            key: 'residentName',
        },
        {
            align: "center",
            title: '身份证号',
            dataIndex: 'residentNumber',
            key: 'residentNumber',
        },
        {
            align: "center",
            title: '手机号码',
            dataIndex: 'residentPhone',
            key: 'residentPhone',
        },
        {
            align: "center",
            title: '签约状态',
            key: 'signingStatus',
            render: (_, record: any) => (
                <>
                    {
                        <Tag color={record.signingStatus === 0 ? "green" : record.signingStatus === 1 ? "geekblue" : "red"}>
                            {record.signingStatus === 0 ? "已签约" : record.signingStatus === 1 ? "签约中" : "待审核"}
                        </Tag>
                    }
                </>
            ),
        },
        {
            align: "center",
            title: '用户标签',
            key: 'rtId',
            render: (_, record) => {
                switch (record.rtId) {
                    case 1:
                        return (<Tag color="geekblue">高血压</Tag>)
                        break;
                    case 2:
                        return (<Tag color="red">冠心病</Tag>)
                        break;
                    case 3:
                        return (<Tag color="orange">高血糖</Tag>)
                        break;
                    case 4:
                        return (<Tag color="red">高血脂</Tag>)
                        break;
                    case 5:
                        return (<Tag color="red">慢病护理</Tag>)
                        break;
                    case 6:
                        return (<Tag color="red">多动症</Tag>)
                        break;
                    default:
                        break;
                }
            },

        },
        {
            align: "center",
            title: '用户状态',
            key: 'residentStatus',
            render: (_, record) => (
                <>
                    <Switch checked={record.residentStatus} onChange={() => { SetUserStatus(record.residentId) }} />
                </>
            ),
        },
        {
            align: "center",
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space>
                    <a onClick={() => { goDetail(record.residentId) }}>查看详情</a>
                    <a onClick={() => { goDetail(record.residentId) }}>编辑</a>
                    <a>发消息</a>
                    <a>添加服务</a>
                    <Popconfirm
                        title="删除"
                        description="你真的要删除吗?"
                        okText="是的"
                        cancelText="取消"
                        onConfirm={() => { deleteResident(record.residentId) }}
                    >
                        <a style={{ color: "red" }}>删除</a>
                    </Popconfirm>

                </Space>
            ),
        },
    ];



    const data: DataType[] = myresidentlist
    let changeTag = (rtId: any) => {
        switch (rtId) {
            case 1:
                return (<Tag color="geekblue">高血压</Tag>)
                break;
            case 2:
                return (<Tag color="red">冠心病</Tag>)
                break;
            case 3:
                return (<Tag color="orange">高血糖</Tag>)
                break;
            case 4:
                return (<Tag color="red">高血脂</Tag>)
                break;
            case 5:
                return (<Tag color="red">慢病护理</Tag>)
                break;
            case 6:
                return (<Tag color="red">多动症</Tag>)
                break;
            default:
                break;
        }
    }

    let goAddResident = () => {//跳到新增页面
        navigate("/index/addresident")
    }
    let searchsigningStatus = async (key: any) => {//按签约状态搜索
        // let res = await Index.Resident.SreachResident({ signingStatus_like: key })
        // console.log(res);
        // res.data.map((item: any, index: any) => {
        //     return (item.key = item.id)
        // })
        // setMyResdentlist(res.data)
    }
    let searchsigningHospital = async (key: any) => {//按医院搜索
        // let res = await Index.Resident.SreachResident({ signingHospital_like: key })
        // console.log(res);
        // res.data.map((item: any, index: any) => {
        //     return (item.key = item.id)
        // })
        // setMyResdentlist(res.data)
    }
    let searchdoctor = async (key: any) => {//按医生团队搜索
        // let res = await Index.Resident.SreachResident({ doctor_like: key })
        // console.log(res);
        // res.data.map((item: any, index: any) => {
        //     return (item.key = item.id)
        // })
        // setMyResdentlist(res.data)
    }
    let searchpackage = async (key: any) => {//按医疗包搜索
        // let res = await Index.Resident.SreachResident({ package_like: key })
        // console.log(res);
        // res.data.map((item: any, index: any) => {
        //     return (item.key = item.id)
        // })
        // setMyResdentlist(res.data)
    }

    // -------------------------------------------------------------------------------
    let search = async (key: any, rtId: any) => {//模糊按姓名搜索
        let res = await Index.Resident.SearchResident({ residentName: key, rtId })
        console.log(res);
        res.data.data.map((item: any, index: any) => {
            return (item.key = item.residentId)
        })
        setMyResdentlist(res.data.data)
    }
    let onFinish = async (value: any) => {
        console.log(value);
        search(value.search, value.userTag)
    }
    return (
        <div className='resident'>
            <div className='title'>居民管理</div>
            <Form onFinish={(value) => { onFinish(value) }} className="form">
                <Row gutter={[16, 16]}>
                    <Col className="gutter-row" span={6}>
                        <Form.Item label="签约状态" name="signingStatus" >
                            <Select
                                onChange={(key) => { searchsigningStatus(key) }}
                                placeholder="请选择"
                                style={{ width: 200 }}
                                options={csage}
                            />
                        </Form.Item>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <Form.Item label="签约机构" name="signingHospital">
                            <Select
                                onChange={(key) => { searchsigningHospital(key) }}
                                placeholder="请选择"
                                style={{ width: 200 }}
                                options={mechanism}
                            />
                        </Form.Item>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <Form.Item label="医生团队" name="doctor">
                            <Select
                                onChange={(key) => { searchdoctor(key) }}
                                placeholder="请选择"
                                style={{ width: 200 }}
                                options={team}
                            />
                        </Form.Item>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <Space>
                            <Button type='primary' onClick={() => { goAddResident() }}>新增居民档案</Button>
                            <Button onClick={() => { excel() }}>导出</Button>
                        </Space>
                    </Col>
                </Row>
                <Row gutter={[16, 16]}>
                    <Col className="gutter-row" span={6}>
                        <Form.Item label="服务包" name="package">
                            <Select
                                onChange={(key) => { searchpackage(key) }}
                                placeholder="请选择"
                                style={{ width: 200 }}
                                options={[
                                    { value: 0, label: '0-6岁儿童包' },
                                    { value: 1, label: '老年人服务包' },
                                    { value: 2, label: "慢性病护理包" },
                                ]}
                            />
                        </Form.Item>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <Form.Item label="居民标签" name="userTag">
                            <Select
                                placeholder="请选择"
                                style={{ width: 200 }}
                                options={userTag}
                            />
                        </Form.Item>
                    </Col>
                    <Col className="gutter-row" span={4}>
                        <Form.Item name="search" rules={[{ required: true, message: '请输入关键字' }]}>
                            <Input placeholder='请输入关键字' />
                        </Form.Item>
                    </Col>
                    <Col className="gutter-row" span={4}>
                        <Form.Item>
                            <Space>
                                <Button type="primary" htmlType='submit'>搜索</Button>
                                <UnorderedListOutlined onClick={() => { setShow(true) }} />
                                <AppstoreOutlined onClick={() => { setShow(false) }} />
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <div style={{ display: show ? "none" : 'block' }}>
                <div className='mine' >
                    {
                        myresidentlist.map((item: any, index: any) => {
                            return (
                                <div className='cardList' key={index} onClick={() => { goDetail(item.residentId) }}>
                                    <Avatar size={64} src={<img src={item.residentImg} alt="" />} className="img" />
                                    <div className='name'>
                                        <div>{item.residentName}</div>
                                        {/* <span>{item.residentAge}</span> */}
                                    </div>
                                    <div className='qianyue'>
                                        待审核
                                    </div>
                                    <div className='tag'>
                                        {changeTag(item.rtId)}
                                    </div>
                                </div>
                            )
                        })
                    }

                </div>
            </div>

            <Table columns={columns} style={{ display: show ? "block" : 'none' }} dataSource={data} className="table" />
        </div >
    );
}

export default Resident;